import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'

// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import Cart from '../views/Cart/cart.vue'
import LifeCycle from '../views/Temp/index.vue'
import Ref from '../views/Temp/ref.vue'
import Reactive from '../views/Temp/reactive.vue'
import ReactiveToRefs from '../views/Temp/reactiveToRefs.vue'
import Computed from '../views/Temp/computed.vue'
import Watch from '../views/Temp/watch.vue'
import Router from '../views/Temp/router.vue'
import Vuex from '../views/Temp/vuex.vue'
import Suspense from '../views/others/Suspense.vue'
import Teleport from '../views/others/teleport.vue'

// 2. 定义路由配置
const routes = [
  { 
    path: '/',
    redirect: '/lifeCycle'
  },
  { 
    path: '/cart',
    component: Cart,
    meta: { name: "cart", title: "购物车", back: false }
  },
  { 
    path: '/lifeCycle',
    component: LifeCycle,
    meta: { name: "lifeCycle",title: "vue3生命周期及方法", back: false }
  },
  { 
    path: '/ref',
    component: Ref,
    meta: { name: "ref",  title: "ref单值", back: false }
  },
  { 
    path: '/reactive',
    component: Reactive,
    meta: { name: "reactive",reactive: "reactive",title: "Reactive响应式", back: false }
  },
  { 
    path: '/reactiveToRefs',
    component: ReactiveToRefs,
    meta: { name: "reactiveToRefs", title: "Reactive + toRefs", back: false }
  },
  { 
    path: '/computed',
    component: Computed,
    meta: { name: "Computed",title: "Computed", back: false }
  },
  { 
    path: '/watch',
    component: Watch,
    meta: { name: "watch",  title: "watch", back: false }
  },
  { 
    path: '/router',
    component: Router,
    meta: { name: "router",  title: "路由router", back: false }
  },
  { 
    path: '/vuex',
    component: Vuex,
    meta: { name: "vuex",title: "Vuex", back: false }
  },
  { 
    path: '/suspense',
    component: Suspense,
    meta: { name: "suspense", title: "Suspense", back: false }
  },
  { 
    path: '/teleport',
    component: Teleport,
    meta: { name: "teleport", title: "Teleport", back: false }
  }
];

const router = createRouter({
  // 4. 采用hash 模式
  // history: createWebHashHistory(),
  // 采用 history 模式
  history: createWebHistory(),
  routes,
})

export default router;
export  {
  routes
}